<template>
  <div class="dfc fx-1">
    <el-menu :default-active="activeRouter" router class="el-menu-demo bdr-10" mode="horizontal">
      <el-menu-item index="/message/bill">票据提醒
        <v-plain-tips :num="unreadTips.billCount"/>
      </el-menu-item>
      <el-menu-item index="/message/trans">交易提醒
        <v-plain-tips :num="unreadTips.txnCount"/>
      </el-menu-item>
      <el-menu-item index="/message/system">系统提醒
        <v-plain-tips :num="unreadTips.sysCount"/>
      </el-menu-item>
    </el-menu>
    <router-view class="fx-1 bg-fff bdr-10"></router-view>
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import vFormTitle from '@/components/form-title'
  import { Action, Getter } from 'vuex-class'
  import vPlainTips from '@/components/plain-tips'

  @Component({
    components: {
      vFormTitle, vPlainTips
    }
  })
  export default class Message extends Vue {
    @Getter unreadTips

    get activeRouter () {
      return this.$route.meta
    }

    mounted () {
    }
  }
</script>

<style lang="less" scoped>
  .f {
    width: 1180px;
    margin: 0 auto;
  }

  .el-menu-demo {
    border-bottom: none;
    margin-bottom: 10px;
    padding-left: 10px;
  }
</style>
